<template>
    <el-switch
            v-model="theme"
            :active-icon="Sunny"
            :inactive-icon="Moon"
            inline-prompt
            size="large"
            @change="toggleDark"
    />
</template>

<script lang='ts' setup>
import { useDark, useToggle } from '@vueuse/core'
import { ref } from 'vue'
import { Moon, Sunny } from '@element-plus/icons-vue'

const isDark = useDark()
const theme = ref(!isDark.value)
const change = useToggle(isDark)
const toggleDark = () => {
  console.log('ff')
  change()
}
</script>

<style lang='scss' scoped>
.el-switch {
  align-self: center;
  margin: 0 10px;
}
</style>